<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排队叫号系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .card {
            margin-top: 20px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #007bff;
            color: white;
            font-size: 1.5rem;
            font-weight: bold;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
            border-color: #218838;
        }
        .status-box {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
        }
        .status-box h3 {
            margin-bottom: 15px;
            font-size: 1.25rem;
            color: #333;
        }
        .status-box ul {
            list-style-type: none;
            padding: 0;
        }
        .status-box ul li {
            padding: 10px;
            border-bottom: 1px solid #eee;
            font-size: 1rem;
            color: #555;
        }
        .status-box ul li:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="card">
        <div class="card-header text-center">
            排队叫号系统
        </div>
        <div class="card-body">
            <div class="d-grid gap-2">
                <button class="btn btn-primary btn-lg" onclick="getNumber()">
                    <i class="fas fa-ticket-alt"></i> 取号
                </button>
                <button class="btn btn-success btn-lg" onclick="callNumber()">
                    <i class="fas fa-bullhorn"></i> 叫号
                </button>
            </div>
            <div class="status-box">
                <h3>当前排队状态</h3>
                <ul id="status"></ul>
            </div>
        </div>
    </div>
</div>

<script>
    const ws = new WebSocket('ws://127.0.0.1:2346');

    ws.onmessage = function(event) {
        const data = JSON.parse(event.data);
        if (data.type === 'call') {
            alert(`叫号：${data.number}`);
        }
    };

    function getNumber() {
        fetch('api/queue/getNumber')
            .then(response => response.json())
            .then(data => {
                alert(`取号成功：${data.number}`);
            });
    }

    function callNumber() {
        fetch('api/queue/callNumber')
            .then(response => response.json())
            .then(data => {
                alert(`叫号成功：${data.number}`);
            });
    }

    function getQueueStatus() {
        fetch('api/queue/getQueueStatus')
            .then(response => response.json())
            .then(data => {
                const statusList = document.getElementById('status');
                statusList.innerHTML = data.status.map(number => `<li>号码：${number}</li>`).join('');
            });
    }

    // 定时获取排队状态
    setInterval(getQueueStatus, 5000);
</script>

<!-- Bootstrap JS and dependencies -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
</body>
</html>